<script setup>
import {ref, defineProps} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
const ind = ref(0)
onLoad((option)=>{
  ind.value = option.index?0:option.index
})

const list2 = ref([
  {name: '全部'},
  {name: '待付款'},
  {name: '已支付'},
  {name: '交易完成'},
])
function onChange(e) {
  console.log(e);
}
</script>

<template>
<view style="background:#efefef;height:100vh;">
  <view class="header">
    <view>我的订单</view>
    <up-tabs :list="list2"
             @change="onChange"
             itemStyle="width:750rpx;"
             value="交易完成"
    ></up-tabs>

  </view>
<!--  end header-->
  <view class="order-box">
    <view class="box-top">
      <view>订单编号13000000000</view>
      <view style="color:red">待付款</view>
    </view>
    <view class="order-content">
      <image class="order-content-image" src="/static/logo.png"></image>
      <view class="order-title">
        <view class="h1">非常好喝的咖啡</view>
        <view class="p">克数：5克</view>
        <view class="price">￥54.3</view>
      </view>
    </view>
    <view class="bottom">
      <view class="bottom-title">合计：<text style="color:red;">￥16.00</text></view>
    </view>
  </view>
</view>
</template>

<style scoped lang="scss">
.header{
  width:750rpx;
  font-size:34rpx;
  text-align:center;
  line-height:100rpx;
  background:#fff;
  margin-bottom:19rpx;
}
.order-box{
  width:750rpx;
  background:#fff;
  margin-bottom:19rpx;
  .box-top{
    margin:auto;
    width:678rpx;
    height:106rpx;
    display:flex;
    justify-content:space-between;
    align-items: center;
    border-bottom: 1px rgba(0, 0, 0, 0.2) solid;
  }
  .order-content{
    width:678rpx;
    display:flex;
    margin:auto;
    height:221rpx;
    align-items: center;
    .order-content-image{
      width:161rpx;
      height:161rpx;
      margin-right:20rpx;

    }
    .order-title{
      width:490rpx;
      .h1{
        font-size:31rpx;
      }
      .p{
        font-size:19rpx;
        color: rgba(0, 0, 0, 0.48);
      }
      .price{
        font-size:19rpx;
        margin-top:57rpx;
      }
    }

  }
  .bottom{
    width:678rpx;
    margin:auto;
    display:flex;
    box-sizing: border-box;
    padding-left:450rpx;
    align-items: center;
    border-top:1px rgba(0, 0, 0, 0.27) solid;
    .bottom-title{
      color: rgba(0, 0, 0, 0.49);
      display:flex;
      height:98rpx;
    }
  }

}
</style>